<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” /> 
	<title>520-1314</title>
	<script type="text/javascript">
　　window.onload=function(){
　　var height=document.body.scrollHeight;
　　var logo_wrap=document.getElementById("rect-wrap");
　　var margin_top=((1-logo_wrap.offsetHeight/height)/2)*100; 
　　logo_wrap.style.marginTop=margin_top+"%";
　　};
</script>
	<style type="text/css">
	#rect-wrap {
		position: relative;

		perspective: 100rem;
	}
	.container {
		width:  50rem;
		height: 50rem;
		margin: 0 auto;
		transform-style: preserve-3d;
		transform-origin: 50% 50% 12.5rem;
		animation: rotate-frame 30s linear infinite;
	}
	.slide {
		width: 25rem;
		height: 25rem;
		position: absolute;  
	}
	.top {
		background:url('img/1.jpeg');
		background-size:100% 100%;
		left: 12.5rem;
		top: -12.5rem;
		transform: rotateX(-90deg);
		transform-origin: bottom;
	}
	.bottom {
		background:url('img/2.jpeg');
		background-size:100% 100%;
		left: 12.5rem;
		bottom: -12.5rem;
		transform: rotateX(90deg);
		transform-origin: top;
	}
	.left {
		background:url('img/3.jpeg');
		background-size:100% 100%;
		left: -12.5rem;
		top: 12.5rem;
		transform: rotateY(90deg);
		transform-origin: right;
	}
	.right {
		background:url('img/7.jpeg');
		background-size:100% 100%;
		left: 37.5rem;
		top: 12.5rem;
		transform: rotateY(-90deg);
		transform-origin: left;
	}
	.front {
		background:url('img/5.jpeg');
		background-size:100% 100%;
		left: 12.5rem;
		top: 12.5rem;
		transform: translateZ(25rem); 
	}
	.back {
		background:url('img/6.jpeg');
		background-size:100% 100%;
		left: 12.5rem;
		top: 12.5rem;
		transform: translateZ(0);  
	}
	@keyframes rotate-frame {
		0% {
			transform: rotateX(0deg) rotateY(0deg);
		}
		10% {
			transform: rotateX(0deg) rotateY(180deg);
		}
		20% {
			transform: rotateX(-180deg) rotateY(180deg);
		}
		30% {
			transform: rotateX(-360deg) rotateY(180deg);
		}
		40% {
			transform: rotateX(-360deg) rotateY(360deg);
		}
		50% {
			transform: rotateX(-180deg) rotateY(360deg);
		}
		60% {
			transform: rotateX(90deg) rotateY(180deg);
		}
		70% {
			transform: rotateX(0) rotateY(180deg);
		}
		80% {
			transform: rotateX(90deg) rotateY(90deg);
		}
		90% {
			transform: rotateX(90deg) rotateY(0);
		}
		100% {
			transform: rotateX(0) rotateY(0);
		}
	}

	</style>
</head>
<body>
	<embed src="public/woyaoni.mp3" hidden="true" autostart="true" loop="-1"> 
	<div id="rect-wrap">  <!--  //舞台元素，设置perspective，让其子元素获得透视效果。 -->
		<div class="container">   <!--   //容器，设置transform-style: preserve-3d，让其子元素在3D空间呈现-->
			<div class="top slide"></div>  <!-- //立方体的六个面-->
			<div class="bottom slide"></div>
			<div class="left slide"></div>
			<div class="right slide"></div>
			<div class="front slide"></div>
			<div class="back slide"></div>
		</div>
	</div>
</body>
</html>